import { Card, Form, Input, Selector } from "@/components/base";
import { Typography } from "@/components/typography";
import { Flex } from "@/components/flex";
import dayjs from "dayjs";
import * as dataDictionary from "@shared/constant/dataDictionary";
import { DatePicker } from "@/components/date-picker";
import * as hooks from '../../hooks';

const { Text } = Typography;

export function BasicInfoForm() {
    const { isEdit } = hooks.useSearch();

    return (
        <Card>
            <Text size={16} strong style={{ display: 'block', marginBottom: '16px' }}>
                基本信息
            </Text>

            <Form.Item
                label="客户编号"
                name="code"
                style={{ width: '100%', padding: 0 }}
            >
                <Input placeholder="请输入客户编号" disabled={isEdit} />
            </Form.Item>

            <Flex vertical >
                <Form.Item
                    label="客户姓名"
                    name="name"
                    style={{ width: '100%', padding: 0 }}
                    rules={[{ required: true, message: '请输入客户姓名' }]}
                >
                    <Input placeholder="请输入客户姓名" />
                </Form.Item>

                <Form.Item
                    label="客户手机号"
                    name="phone"
                    style={{ width: '100%', padding: 0 }}
                    rules={[{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号' }]}
                >
                    <Input placeholder="请输入客户手机号" />
                </Form.Item>

                <Form.Item
                    label="客户邮箱"
                    name="email"
                    style={{ width: '100%', padding: 0 }}
                    rules={[{ pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/, message: '请输入正确的邮箱' }]}
                >
                    <Input placeholder="请输入客户邮箱" />
                </Form.Item>

                <Form.Item
                    label="客户性别"
                    name="gender"
                    style={{ width: '100%', padding: 0 }}
                    getValueFromEvent={e => e[0]}
                    getValueProps={e => ({ value: [e] })}
                >
                    <Selector options={Object.entries(dataDictionary.genderStr).map(([key, value]) => ({ label: value, value: key }))} />
                </Form.Item>

                <Form.Item
                    label="客户生日"
                    name="birthday"
                    style={{ width: '100%', padding: 0 }}
                    getValueFromEvent={e => e?.format?.('YYYY-MM-DD') ?? null}
                    getValueProps={e => ({ value: e ? dayjs(e) : null })}
                >
                    <DatePicker
                        placeholder="请选择生日"
                    />
                </Form.Item>
            </Flex>
        </Card>
    );
}